<template>
  <li>
    <h3>姓名:{{ p.name }}</h3>
    <p>
      爱好:
      <span v-for="item in p.hobby" :key="item"> {{ item }} </span>
    </p>
  </li>
</template>

<script>
export default {
  name: "Item",
  props: ["p", "count"],
  mounted() {
    console.log(this, "item");
    console.log(this.p, "item");

    //切记!!!!!props是只读属性,不允许被修改!!!!
    // this.p = {};
    // this.count++

    //但是会有人钻空子,如果一个数据是对象类型,我们不替换对象,而是修改了对象内部的属性
    //其实也算是修改了props,但是vue不会报错,因为地址没变,它没有监听到props被修改
    //我们不推荐使用这样的做法!!!!
    this.p.name += "~~~~";
  },
};
</script>

<style></style>